<template>
  <div>
    <!-- <h1>子企业管理</h1> -->
     <div class="q1">
      <span>客户测</span>
      <i class="el-icon-caret-bottom"></i>
     </div>

     <div class="q2">
      <ul class="q3">
        <li class="q4">签单</li>
        <li class="q5">企业类型</li>
      </ul>

       <ul class="q6">
        <li class="q7">9999</li>
        <li class="q8">最大座席数</li>
      </ul>

      <ul class="q9">
        <li class="q10">9999</li>
        <li class="q11">最大登录并发数</li>
      </ul>

      <ul class="q12">
        <li class="q13">停用</li>
        <li class="q14">API功能</li>
      </ul>

       <ul class="q15">
        <li class="q16">启用</li>
        <li class="q17">录音</li>
      </ul>
     </div>

     <ul class="w1">
      <li>企业信息</li>
      <li>话机列表</li>
      <li>话机管理</li>
      <li>坐席管理</li>
      <li>呼叫计费配置</li>
     </ul>
     <hr class="w2">

     <div class="w3">
      <span class="w4">子企业基本信息</span>
      <li class="w5">子企业名称</li>
      <li class="w6">客户侧</li>
      <li class="w7">企业类型</li>
      <li class="w8">签单</li>
      <li class="w9">截止日期</li>
      <li class="w10">--</li>
      <li class="w11">最大座席数</li>
      <li class="w12">9999</li>
      <li class="w13">最大登录并发数</li>
      <li class="w14">9999</li>
      <li class="w15">创建时间</li>
      <li class="w16">2019-08-22 19:29:28</li>
     </div>


  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {

  },
}
</script>
<style lang='less' scoped>
li{
  list-style: none;
}
.q1{
  width: 200px;
  height: 45px;
  position: relative;
  left: 20px;
  top: 20px;
  background-color: rgb(233,243,251);
  color: rgb(33,158,255);
  line-height: 45px;
}
.q1 span{
  position: absolute;
  left: 30px;
}
.el-icon-caret-bottom{
  position: absolute;
  right: 10px;
  top: 15px;
}
.q2{
  width: 900px;
  height: 180px;
  // background-color: aqua;position: relative;
  position: relative;
  top: 40px;
  left: 20px;
  border: 1px solid rgb(240,241,242);
}
.q3{
  position: absolute;
  left: 40px;
  top: 20px;
}
.q4{
  font-size: 25px;
}
.q5{
  position: relative;
  right: 8px;
  top: 20px;
  color: rgb(151,175,185);
}
.q6{
  position: absolute;
  left: 180px;
  top: 20px;
}
.q7{
  font-size: 25px;
}
.q8{
  position: relative;
  right: 5px;
  top: 20px;
  color: rgb(151,175,185);
}
.q9{
  position: absolute;
  left: 340px;
  top: 18px;
}
.q10{
  font-size: 25px;
}
.q11{
  position: relative;
  right: 15px;
  top: 20px;
  color: rgb(151,175,185);
}
.q12{
  position: absolute;
  left: 520px;
  top: 18px;
}
.q13{
  font-size: 25px;
}
.q14{
  position: relative;
  top: 20px;
  color: rgb(151,175,185);
}
.q15{
  position: absolute;
  left: 690px;
  top: 20px;
}
.q16{
  font-size: 25px;
}
.q17{
  position: relative;
  top: 20px;
  left: 8px;
  color: rgb(151,175,185);
}
.w1{
  position: relative;
  top: 40px;
  right: 40px;
}
.w1 li{
  display: inline-block; 
  padding-left: 40px;
}
.w2{
  position: relative;
  top: 35px;
  width: 800px;
  right: 35px;
}
.w3{
  width: 900px;
  height: 180px;
  border: 1px solid rgb(240,241,242);
  position: relative;
  top: 40px;
  left: 20px;
}
.w4{
  font-size: 15px;
  position: absolute;
  top: 10px;
}
.w5{
  position: absolute;
  top: 50px;
  left: 100px;
  color: rgb(145,157,177);
}
.w6{
  position: absolute;
  top: 50px;
  left: 220px;
}
.w7{
  position: absolute;
  top: 100px;
  left: 115px;
  color: rgb(145,157,177);
}
.w8{
   position: absolute;
  top: 100px;
  left: 220px;
}
.w9{
  position: absolute;
  top: 150px;
  left: 115px;
  color: rgb(145,157,177);
}
.w10{
  position: absolute;
  top: 150px;
  left: 220px;
}
.w11{
  position: absolute;
  left: 500px;
  top: 40px;
  color: rgb(145,157,177);
}
.w12{
  position: absolute;
  left: 600px;
  top: 40px;
}
.w13{
  position: absolute;
  left: 470px;
  top: 90px;
  color: rgb(145,157,177);
}
.w14{
  position: absolute;
  left: 600px;
  top: 90px;
}
.w15{
  position: absolute;
  left: 520px;
  top: 150px;
  color: rgb(145,157,177);
}
.w16{
  position: absolute;
  left: 600px;
  top: 150px;
}
</style>